<template>
  <div class="group-assistant">
    <template v-if="!showAddPage">
      <div class="group-assistant-title">
        <div class="log-type">
          <p>群发列表</p>
          <el-radio-group v-model="currentTab" class="send-log-tab">
            <el-radio :label="1">群发好友</el-radio>
            <el-radio :label="5">群发群</el-radio>
          </el-radio-group>
        </div>
        <el-button
          style="background-color: #ff9f00; color: #ffffff; border: solid #ff9f00 1px"
          size="small"
          icon="el-icon-plus"
          @click="togglePage"
        >
          新增群发
        </el-button>
      </div>
      <GroupAssistantLog :currentTab="currentTab" />
    </template>
    <GroupAssistantSend v-else />
  </div>
</template>

<script>
import GroupAssistantSend from './components/GroupAssistantSend.vue'
import GroupAssistantLog from './components/GroupAssistantLog.vue'

export default {
  components: {
    GroupAssistantLog,
    GroupAssistantSend
  },
  data() {
    return {
      showAddPage: false, // 展示新建群发
      currentTab: 1 // 群发类型
    }
  },
  methods: {
    // 隐藏或展示添加群发页面
    togglePage() {
      if (!this.$store.getters['conversation/currentWeChatId']) {
        this.$alert('请先选中一个微信！', '提示', { type: 'warning' })
        return
      }
      this.showAddPage = !this.showAddPage
    }
  }
}
</script>

<style lang="scss" scoped>
.group-assistant {
  flex: 1 1 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .group-assistant-title {
    color: #333333;
    font-size: 14px;
    padding: 5px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .log-type {
      display: flex;
      align-items: center;
      height: 30px;
      p {
        margin-right: 10px;
      }
    }
  }
}
</style>
